<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>加入购物车</title>
  <link rel="stylesheet" type="text/css" href="../css/gg.css" />
  <link rel="stylesheet" type="text/css" href="../css/item.css"/>
  <link rel="stylesheet" type="text/css" href="../font_2477364_wu0wguawp9/iconfont.css"/>
  <link rel="stylesheet" type="text/css" href="../css/swiper-bundle.min.css" />
</head>
  <body style="overflow-x: hidden">
    <!-- 头部-->
    <div class="top">
      <!-- 头部导航栏左边 -->
      <div class="top_left">
        <span class="top_left_logo"></span>
        <span class="top_left_input"
          >下拉查看类目<img src="../img/top/toplogo1.png"
        />
        <ul class="top_nav" >
          <li>礼包收藏</li>
          <li>手办模型</li>
          <li>数码电子</li>
          <li>玩家共创</li>
          <li>新品专区</li>
          <li>二觉礼盒</li>
          <li>服饰日用</li>
        </ul>
      </span>
     
      </div>
     
      <!-- 头部导航栏中间 -->
      <div class="top_center">
        <a href="../index.html"></a>
      </div>
      <!-- 头部导航栏右边-->
      <div class="top_right">
        <a href="./logo.html">
          <span class="top_right_nav hs iconfont" style="font-size: 12px"
            >&#xe637;请QQ登录</span
          ></a
        >
        <a href="#">
          <span class="top_right_nav">
          我的订单<img src="../img/top/toplogo1.png" /></span>
      </a>
        <a href="#">
          <span class="top_right_nav"
            >周边公告<img src="../img/top/toplogo1.png" /></span
        ></a>
        <a href="#">
          <span class="top_right_nav"
            >帮助中心<img src="../img/top/toplogo1.png" /></span
        ></a>
        <a href="#">
          <span class="top_right_nav iconfont" style="font-size: 12px"
            >&#xe633;手机周边</span
          ></a
        >
      </div>
    </div>
    <!-- 头部-->

    <!--导航栏-->
    <div class="nav">
      <div class="nav_box">
        <div class="nav_list">
          <a href="../index.html">商城首页</a>
          <a href="#">全部商品</a>
          <a href="#">礼包收藏</a>
          <a href="#">领取游戏道具</a>
          <a href="#">土罐集市</a>
          <a href="#" class="no_line">妙趣盒·点亮大集结</a>
        </div>
        <div class="nav_right">
          <input type="text" class="txt" placeholder="全站搜索" />
          <span class="big"></span>
        </div>
      </div>
    </div>
    <!--导航栏-->

    <!--购物车样式-->
    <div class="productlist">
      <div class="productlist_box">
        

      </div>
    </div>
    <!--购物车样式-->
    <div class="bottom">

    </div>


























<script src="../js/axios.min.js"></script>
<script src="../js/api.js"></script>
  <script>
     let top_center=document.querySelector(".top_center");
 top_center.onclick=function(){
   location.href="../index.html"
 }
      let search = location.search;
      let obj = new URLSearchParams(search);
      let id = obj.get("pid");
      let uid = localStorage.getItem("uid");
      let uname=localStorage.getItem("uname");

      logo()
     product()
      function product(){
        let productlist_box=document.querySelector(".productlist_box");
        if(id){
          let params={id}
          axios.get(detail,{params}).then((res) => {
             let obj=res.data.data;
             console.log(obj)
             let str=`
             <div class="box_left">
            <div class="box_left_img">
              <img src="${obj.pimg}">
            </div>
        </div>

        <div class="box_right">
          <div class="box_right_title">${obj.pname}</div>
          <div class="box_right_txt">
            DNF周边匠工出品，性价比最高手办！重达7.5Kg，赠：稀有克隆装扮一件、礼包限量专属光环一个。限量1000，售完即止[特殊商品，暂不支持退款][请于下单后30天内领取游戏道具]
          </div>
          <div class="box_right_bg">
          <div class="box_right_bg_box">
            <span class="box_right_span1">现价</span>
            <span class="box_right_span2">￥</span>
            <span class="box_right_span3">${obj.pprice}</span>
            <span class="box_right_span4">超值价</span>
          </div>
          </div>
          <div class="box_right_tu"></div>
          <div class="box_right_color">
            <span class="right_color_span1">颜色</span>
            <span class="right_color_span2">
              <img src="${obj.pimg}">
            </span>
          </div>

          <div class="box_right_color">
            <span class="right_color_span1">数量</span>
            <span class="right_color_span2_2">
            <input type="button" class="cut_btn" onclick="btn_cut(this)">
            <input type="text" class="val" value="1">
            <input type="button" class="add_btn" onclick="btn_add(this)">
            </span>
          </div>
          <div class="cart_box">
            <input type="button" class="cart_btn" value="加入购物车" onclick="cart_add()">
            <a href="./cart_list.html" class="cart_list" >我的购物车</a>

          </div>
      </div>
             `
             productlist_box.innerHTML=str;
          });
        }else{
          productlist_box.innerHTML="请选择商品后，再进入此页面";
        }
      }
      //获取商品信息，生成列表

      function btn_cut(btn){
        let val=btn.nextElementSibling;

        if (parseInt(val.value) ==1) {
        }
        else{
          val.value = parseInt(val.value)-1;
        }
      }
      //减少数量
      function btn_add(btn){
        let val=btn.previousElementSibling;
        val.value = parseInt(val.value) + 1;
        
      }
      //添加数量

      function logo(){
      let top_right_nav=document.querySelector(".top_right_nav")
       strr=`<a href="#" class="tuichu">退出</a>`
       if(uname){
      top_right_nav.innerHTML=uname+strr;
      let fu=top_right_nav.parentNode;
      fu.href="#";
      let tuichu=document.querySelector(".tuichu");
      console.log(tuichu)
      tuichu.onclick=function(){
        localStorage.removeItem("uname");
        location.reload();
      }
    }
     }
       //判断用户登录 信息
   
      function cart_add(){
      let pnum=document.querySelector(".val").value;
      if(uname){
        let str=/^[1-9]\d*$/;
      if(str.test(pnum)){
        let params={uid,pid:id,pnum};
        axios.get(add_product, { params }).then((res) => {
          alert("加入购物车成功");
        });
      }   
      else{
           alert("请输入整数")
      }
      }else{
         alert("请登录后再进行操作")
      }
      
     }
       //加入购物页面
 </script>
</body>
</html>